<template>
  <view class="appointmentList-page">
    <NavBar title="选择科室" />

    <view class="list">
      <view
        class="list-item"
        v-for="item in deptList"
        :key="item.deptId"
        @tap="handleToAppointmentDoctors(item.deptId)"
      >
        <text class="name">{{ item.deptName }}</text>

        <Image class="arrow" :src="AppointmentListArrow" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import Taro, { useReady } from "@tarojs/taro";
import NavBar from "../../components/NavBar.vue";
import AppointmentListArrow from "../../assets/images/appointmentList_arrow.png";
import { ref } from "vue";
import { getDeptList } from "../../api/appointment.api";
import type { DeptRes } from "../../../types/appointment.type";

const deptList = ref<DeptRes[]>([]);

const getDeptListApi = async () => {
  const res = await getDeptList();

  if (res.code === "200") {
    deptList.value = res.data;
  }
};

const handleToAppointmentDoctors = (deptId: number) => {
  Taro.navigateTo({
    url: `/pages/appointmentDoctors/appointmentDoctors?deptId=${deptId}`,
  });
};

useReady(() => {
  getDeptListApi();
});
</script>

<style lang="scss">
.appointmentList-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #ffffff;

  .logo-container {
    flex-shrink: 0;
    width: 100%;

    .logo-container-inner {
      padding-top: 11px;
      padding-left: 16px;

      .close {
        width: 22px;
        height: 22px;
      }
    }
  }

  .list {
    flex: 1;
    width: 100%;
    padding: 0px 16px;
    padding-bottom: 25px;
    overflow-y: auto;

    .list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 16px 0px;
      border-bottom: 1px solid #f5f6fa;

      .name {
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .arrow {
        width: 22px;
        height: 22px;
      }
    }
  }
}
</style>
